<!--
 * @Author: your name
 * @Date: 2020-12-21 10:14:36
 * @LastEditTime: 2020-12-21 10:44:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \basicjs\event\dailiform.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代理form</title>
</head>
<body>
    <form action="">
        <input type="text" />
        <button type="button" data-submit-disabled data-action="submit,counter">提交表单</button>
    </form>

    <script>
        class Form{
            constructor(form){
                this.form = form;
                this.form.counter = 0;
                this.form.addEventListener('click',this.handle.bind(this));
            }

            handle(){
                const actions = event.target.dataset.action;
                actions.split(',').forEach((action) => {
                    if(this[action]) this[action]()
                });
            }

            submit(){
                event.preventDefault();
                //点击的时候禁用
                this.disableButton(true);
                console.log('提交中...');
                setTimeout(() => {
                    this.disableButton(false);
                    console.log('提交结束');
                },1000);
            }

            //禁用和释放按钮
            disableButton(state){
                this.form.querySelectorAll(`[data-submit-disabled]`).forEach((bt) => {
                    bt.disabled = state;
                });
            }

            //每次提交的时候提交次数加1
            counter(){
                this.form.counter++;
                console.log(this.form.counter);
            }
        }

        document.querySelectorAll(`form`).forEach((form) => {
            new Form(form);
        });


        
    </script>
</body>
</html>